import defaultAvatar from "@/assets/login/personImg.png";
import { useGlobalContent } from "@/store";
import { Col, Dropdown, Layout, Row, Space, Switch } from "antd";

const { Header } = Layout;

const TopHeader = (props: any) => {
  const { showCockpit, toCockpit, personItems, cockpitPower } = props;
  const { global, globalDispatch } = useGlobalContent();
  const { userInfoData } = global || {};
  const { mc, tx } = userInfoData || {};
  const { systemInfo } = global || {};

  return (
    <Header className="home-top-header">
      <Row className="left-box common_logo" align="middle">
        <Col className="common_logo_icon">
          <img src={SYSTEM_GLOBAL.fileBaseURL + systemInfo.xtbtdz} className="logo-icon" />
        </Col>
        {/* <Col className="common_logo_title">{SYSTEM_GLOBAL.title}</Col> */}
      </Row>

      <Row className="right-box" align="middle" gutter={16}>
        <Col>
          {cockpitPower && (
            <Switch
              checked={showCockpit}
              checkedChildren="驾驶舱"
              unCheckedChildren="驾驶舱"
              onClick={() => toCockpit(true)}
            ></Switch>
          )}
        </Col>
        <Col className="welcome">
          <Space>
            <span>
              您好，
              <span className="user-name">{mc}</span>
            </span>
          </Space>
        </Col>
        <Col>
          <Dropdown menu={{ items: personItems }} arrow>
            {tx ? (
              <img src={SYSTEM_GLOBAL.fileBaseURL + "/" + tx} className="user-avatar pointer" />
            ) : (
              <img src={defaultAvatar} className="user-avatar pointer" />
            )}
          </Dropdown>
        </Col>
      </Row>
    </Header>
  );
};

export default TopHeader;
